<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图表测试</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #0c1426;
            color: white;
            font-family: Arial, sans-serif;
        }
        .chart-container {
            width: 100%;
            height: 600px;
            border: 1px solid #1a3c58;
            border-radius: 8px;
            background: rgba(7, 19, 50, 0.6);
        }
        .test-info {
            margin-bottom: 20px;
            padding: 15px;
            background: rgba(7, 19, 50, 0.8);
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="test-info">
        <h2>气象负荷时间序列图表测试</h2>
        <p>测试ECharts是否能正常渲染五个曲线：平均负荷、最高气温、最低气温、降水量、相对湿度</p>
    </div>
    
    <div id="testChart" class="chart-container"></div>

    <script>
        // 模拟数据
        const mockData = {
            dates: ['06-20', '06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03', '07-04', '07-05', '07-06', '07-07', '07-08', '07-09', '07-10', '07-11', '07-12', '07-13', '07-14', '07-15', '07-16', '07-17', '07-18', '07-19'],
            temp_max: [29.6, 29.7, 29.5, 31.5, 29.9, 32.0, 31.7, 31.2, 32.6, 33.7, 32.8, 32.7, 29.5, 30.5, 31.0, 26.0, 28.2, 26.6, 24.3, 23.1, 23.2, 24.4, 23.9, 22.2, 23.1, 24.2, 24.3, 26.0, 25.7, 25.8],
            temp_min: [22.3, 23.4, 24.5, 26.8, 24.8, 27.3, 26.8, 28.1, 30.0, 28.4, 28.7, 25.8, 26.4, 22.6, 24.2, 21.8, 19.6, 19.5, 19.2, 17.7, 17.7, 17.0, 16.8, 16.0, 17.8, 18.6, 18.3, 17.8, 21.0, 22.0],
            precip: [0.0, 0.0, 0.0, 11.9, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 14.0, 0.0],
            humidity: [68.6, 61.3, 63.6, 57.0, 55.9, 57.6, 51.3, 64.7, 59.4, 55.7, 61.6, 56.6, 63.6, 64.3, 60.0, 67.8, 73.5, 60.5, 77.7, 80.3, 80.4, 87.8, 76.4, 72.2, 73.4, 70.8, 80.6, 77.6, 66.1, 71.0],
            load: [43443, 44601, 46503, 46266, 46717, 48361, 48496, 45977, 46109, 48011, 48655, 46420, 46982, 48174, 45092, 44702, 42924, 43310, 44622, 44554, 42343, 42085, 44148, 42401, 44604, 43286, 43177, 43324, 44724, 44858]
        };

        // 初始化图表
        const chart = echarts.init(document.getElementById('testChart'));
        
        const option = {
            title: {
                text: '气象与负荷时间序列分析（前30天）',
                left: 'center',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#ffffff'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                formatter: function(params) {
                    let result = `日期: ${params[0].axisValue}<br/>`
                    params.forEach(param => {
                        let value = param.value
                        let unit = ''
                        if (param.seriesName === '平均负荷') {
                            unit = ' MW'
                        } else if (param.seriesName.includes('温度')) {
                            unit = '°C'
                        } else if (param.seriesName === '降水量') {
                            unit = ' mm'
                        } else if (param.seriesName === '相对湿度') {
                            unit = '%'
                        }
                        result += `${param.seriesName}: ${value}${unit}<br/>`
                    })
                    return result
                }
            },
            legend: {
                data: ['平均负荷', '最高气温', '最低气温', '降水量', '相对湿度'],
                top: 40,
                textStyle: {
                    fontSize: 14,
                    color: '#ffffff'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: mockData.dates,
                axisLabel: {
                    rotate: 45,
                    fontSize: 12,
                    color: '#ffffff'
                },
                name: '日期',
                nameLocation: 'middle',
                nameGap: 50,
                nameTextStyle: {
                    color: '#ffffff'
                },
                axisLine: {
                    lineStyle: {
                        color: '#ffffff'
                    }
                }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '负荷 (MW)',
                    position: 'left',
                    axisLabel: {
                        formatter: '{value}',
                        color: '#ffffff'
                    },
                    nameTextStyle: {
                        fontSize: 14,
                        color: '#ffffff'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)'
                        }
                    }
                },
                {
                    type: 'value',
                    name: '温度 (°C)',
                    position: 'right',
                    axisLabel: {
                        formatter: '{value}',
                        color: '#ffffff'
                    },
                    nameTextStyle: {
                        fontSize: 14,
                        color: '#ffffff'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    },
                    splitLine: {
                        show: false
                    }
                },
                {
                    type: 'value',
                    name: '降水量 (mm) / 湿度 (%)',
                    position: 'right',
                    offset: 80,
                    axisLabel: {
                        formatter: '{value}',
                        color: '#ffffff'
                    },
                    nameTextStyle: {
                        fontSize: 14,
                        color: '#ffffff'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: '平均负荷',
                    type: 'line',
                    yAxisIndex: 0,
                    data: mockData.load,
                    itemStyle: { color: '#ff6b6b' },
                    lineStyle: { width: 3 },
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6
                },
                {
                    name: '最高气温',
                    type: 'line',
                    yAxisIndex: 1,
                    data: mockData.temp_max,
                    itemStyle: { color: '#ffa726' },
                    lineStyle: { width: 2 },
                    smooth: true,
                    symbol: 'diamond',
                    symbolSize: 5
                },
                {
                    name: '最低气温',
                    type: 'line',
                    yAxisIndex: 1,
                    data: mockData.temp_min,
                    itemStyle: { color: '#4ecdc4' },
                    lineStyle: { width: 2 },
                    smooth: true,
                    symbol: 'triangle',
                    symbolSize: 5
                },
                {
                    name: '降水量',
                    type: 'line',
                    yAxisIndex: 2,
                    data: mockData.precip,
                    itemStyle: { color: '#45b7d1' },
                    lineStyle: { width: 2, type: 'dashed' },
                    smooth: true,
                    symbol: 'rect',
                    symbolSize: 4
                },
                {
                    name: '相对湿度',
                    type: 'line',
                    yAxisIndex: 2,
                    data: mockData.humidity,
                    itemStyle: { color: '#96ceb4' },
                    lineStyle: { width: 2 },
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 4
                }
            ]
        };
        
        console.log('开始渲染测试图表...');
        chart.setOption(option);
        console.log('测试图表渲染完成');
        
        // 监听窗口大小变化
        window.addEventListener('resize', () => {
            chart.resize();
        });
    </script>
</body>
</html>